<%@page pageEncoding="UTF-8" language="java" contentType="text/html; UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="../../jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
          rel="stylesheet"/>
    <link href="../../jquery/bs_pagination-master/css/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet"/>

    <script type="text/javascript" src="../../jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="../../jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="../../jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="../../jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="../../jquery/bs_pagination-master/localization/en.js"></script>

    <%--导入 日历插件--%>
    <script type="text/javascript"
            src="../../jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <%-- 汉化--%>
    <script type="text/javascript"
            src="../../jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <script type="text/javascript">

        $(function () {

            function loadActivityList(pageNum, pageSize) {
                $("#checkAll").prop("checked",false);
                var name = $("#name").val();
                var owner = $("#owner").val();
                var startDate = $("#startDate").val();
                var endDate = $("#endDate").val();
                $.ajax({
                    url: "api/activityList",
                    data: {
                        name: name,
                        owner: owner,
                        startDate: startDate,
                        endDate: endDate,
                        pageNum: pageNum,
                        pageSize: pageSize
                    },
                    success: function (result) {
                        // console.log(result.data.activities)
                        var html = "";
                        $.each(result.data.activities, function (i, item) {
                            html += `
								<tr class="active">
									<td><input type="checkbox" class="checkedOne" value="${'${item.id}'}" /></td>
									<td><a style="text-decoration: none; cursor: pointer;" onclick=window.location.href="detail?id=${'${item.id}'}">${'${item.name}'}</a></td>
									<td>${'${item.owner}'}</td>
									<td>${'${item.startDate}'}</td>
									<td>${'${item.endDate}'}</td>
								</tr>
						`;
                        })
                        /*将模板字符串写入  tbody标签中*/
                        $("#activityList").html(html);
                        /*使用分页插件*/
                        $("#myPagination").bs_pagination({
                            currentPage: result.data.pageNum,
                            rowsPerPage: result.data.pageSize,
                            maxRowsPerPage: 10,
                            totalRows: result.data.rows,
                            totalPages: result.data.pages,
                            visiblePageLinks:5,				//显示的翻页卡片数
                            showGoToPage:true, 				//是否显示"跳转到第几页"
                            showRowsPerPage:true, 			//是否显示"每页显示条数"
                            showRowsInfo:true,  			//是否显示"记录的信息",
                            onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked
                                loadActivityList(data.currentPage, data.rowsPerPage);
                            },
                        });
                    }
                })
            }

            /*页面加载就会执行一次*/
            loadActivityList(1, 4);

            /*查询按钮添加  点击事件*/
            $("#queryBt").click(function () {
                loadActivityList(1, $('#myPagination').bs_pagination('getOption', 'rowsPerPage'));
            })

            /*使用日期插件*/

            $(".mydate").datetimepicker({
                language: 'zh-CN',//语言
                format: 'yyyy-mm-dd',//日期格式
                minView: 'month',//日期选择器上最小能选择的日期的视图
                initialDate: new Date(),// 日历的初始化显示日期，此处默认初始化当前系统时间
                autoclose: true,//选择日期之后，是否自动关闭日历
                todayBtn: true,//是否显示当前日期的按钮
                clearBtn: true //是否显示清空按钮
            });

            /*打开模态框*/
            // $("#createActivityModal").modal('show');

            /*关闭模态框*/
            // $("#createActivityModal").modal('hide');

            /*创建按钮*/

            $("#createBtn").click(function () {
                /*把模态框元数据 清空*/
                $("#createForm").get(0).reset();
                /*打开模态框*/
                $("#createActivityModal").modal('show');
            })

            /*保存按钮*/
            $("#saveBtn").click(function () {
                var activity ={
                    owner:$("#create-marketActivityOwner").val(),
                    name:$("#create-marketActivityName").val(),
                    startDate:$("#create-startTime").val(),
                    endDate:$("#create-endTime").val(),
                    cost:$("#create-cost").val(),
                    description:$("#create-describe").val(),
                }
                /*发送请求*/
                $.ajax({
                    url: "api/addActivity",
                    type:"post",
                    data:activity,
                    success:function (result) {
                        alert(result.msg);
                        /*关闭模态框*/
                        $("#createActivityModal").modal('hide');
                        /*刷新列表*/
                        loadActivityList(1, $('#myPagination').bs_pagination('getOption', 'rowsPerPage'));
                    }
                })
            })

            /*修改按钮*/
            $("#updateBtn").click(function () {
                if ($(".checkedOne:checked").length!=1){
                    alert("请选择一个");
                    return;
                }
                //获取选中的复选框中 存的 id
                var id = $(".checkedOne:checked").val();
                /*发送请求 获取 通过id 查询的 活动信息*/
                $.ajax({
                    url:"api/getActivity",
                    data:{
                        id:id
                    },
                    type:"get",
                    dataType:"json",
                    success:function (result) {
                        var activity = result.data;
                        //    找到对应的输入框、下拉列表  覆盖原有的值
                        $("#edit-marketActivityName").val(activity.name);
                        //$("#edit-marketActivityOwner").val(activity.owner),//名字
                        $("#edit-startTime").val(activity.startDate),
                        $("#edit-endTime").val(activity.endDate),
                        $("#edit-cost").val(activity.cost),
                        $("#edit-describe").val(activity.description)
                        //存入id
                        $("#activityId").val(activity.id);
                        //打开显示下拉列表对应的人名   activity.owner比较   option 中的 文字
                        $("#edit-marketActivityOwner>option").each(function (i,item) {
                        //        便利 每个 option  将 内容与  owner比较  如果相同  则设置属性 selected
                            if($(item).text()==activity.owner){
                                $(item).prop("selected",true);
                            }
                        })
                        /*表单数据清空*/
                    }
                })
                $("#editActivityModal").modal('show');
            })

            /*更新按钮*/
            $("#modifyBtn").click(function () {
                var activity = {
                    owner: $("#edit-marketActivityOwner").val(),
                    name: $("#edit-marketActivityName").val(),
                    startDate: $("#edit-startTime").val(),
                    endDate: $("#edit-endTime").val(),
                    cost: $("#edit-cost").val(),
                    description: $("#edit-describe").val(),
                    id:$("#activityId").val()
                }
                $.ajax({
                    url:"api/updateActivity",
                    data:activity,
                    type:"post",
                    success:function (result) {
                        if (result.code==2000){
                            alert(result.msg);
                            $("#editActivityModal").modal('hide');
                            loadActivityList($('#myPagination').bs_pagination('getOption', 'currentPage'), $('#myPagination').bs_pagination('getOption', 'rowsPerPage'));
                        }else {
                            alert(result.msg);
                        }
                    }
                })
            })

            /*删除按钮*/
            $("#deleteBtn").click(function () {
                if ($(".checkedOne:checked").length<1){
                    alert("请至少选择一个");
                    return;
                }
                if (!confirm("确定删除吗?")){
                    return
                }
                var ids="";
                $(".checkedOne:checked").each(function (i,item) {
                    ids+="&ids="+$(item).val()
                })
                console.log(ids)
                $.ajax({
                    url:"api/delete",
                    data:ids,
                    type:"post",
                    success:function (result) {
                        if (result.code==2000){
                            loadActivityList(1, $('#myPagination').bs_pagination('getOption', 'rowsPerPage'));
                        }else {
                            alert(result.msg)
                        }
                    }
                })
            });

            /*多选联动*/
            $("#checkAll").click(function () {
                /*checkAll选择中 则 所有 checkOne 也选中  反之相同*/
                $(".checkedOne").prop("checked",$("#checkAll").prop("checked"))
            })
            $("#activityList").delegate(".checkedOne","click",function () {//未来元素绑定事件
                $("#checkAll").prop("checked",$(".checkedOne").length==$(".checkedOne:checked").length);
            })

            /*选择导出*/
            $("#exportActivityXzBtn").click(function () {
                if ($(".checkedOne:checked").length<1){
                    alert("请至少选择一个");
                    return;
                }
                var ids="";
                $(".checkedOne:checked").each(function (i,item) {
                    ids+="&ids="+$(item).val()
                })
                /*发送同步请求 下载*/
                window.location.href="exportExcel?"+ids;
            })


            /*导入*/
            $("#importActivityBtn").click(function () {
               var fileName = $("#activityFile").val();//文件名称
                if (fileName==''){
                    alert("请选择文件")
                    return;
                }
                var ext = fileName.substring(fileName.lastIndexOf("."));
                /*将后缀名 转换为 大写 或者 小写*/
                if (ext.toUpperCase()!=".XLS"){
                    alert("文件格式不正确")
                    return;
                }
                var file = $("#activityFile").get(0).files[0];//获取文件对象
                if (file.size>(5*1024*1024)){
                    alert("文件大小不能超过5M")
                    return;
                }
                /*封装上传文件*/
                var formDate = new FormData();
                formDate.append("activityFile",file);
                /*发起请求*/
                $.ajax({
                    url:"api/importExcel",
                    type:"post",
                    data:formDate,
                    processData:false,
                    contentType:false,
                    success:function (result) {
                        if (result.code==2000){
                            alert(result.msg);
                            $("#importActivityModal").modal('hide');
                            loadActivityList(1, $('#myPagination').bs_pagination('getOption', 'rowsPerPage'));
                        }else {
                            alert(result.msg);
                        }
                    }
                })
            })

        });

    </script>
</head>
<body>

<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
            </div>
            <div class="modal-body">
                <%-- 创建表单 --%>
                <form id="createForm" class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-marketActivityOwner" >
                                <c:forEach items="${users}" var="user" >
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-marketActivityName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="create-startTime">
                        </div>
                        <label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="create-endTime">
                        </div>
                    </div>
                    <div class="form-group">

                        <label for="create-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-cost">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="create-describe"></textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
            </div>
            <div class="modal-body">

                <form id="updateForm" class="form-horizontal" role="form">
                        <input type="hidden" id="activityId" value="">
                    <div class="form-group">
                        <label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit-marketActivityOwner">
                                <c:forEach items="${users}" var="user" >
                                    <option value="${user.id}">${user.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="edit-startTime" value="2020-10-10">
                        </div>
                        <label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control mydate" id="edit-endTime" value="2020-10-20">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-cost" class="col-sm-2 control-label">成本</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit-cost" value="5,000">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit-describe" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10" style="width: 81%;">
                            <textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="modifyBtn">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
            </div>
            <div class="modal-body" style="height: 350px;">
                <div style="position: relative;top: 20px; left: 50px;">
                    请选择要上传的文件：<small style="color: gray;">[仅支持.xls或.xlsx格式]</small>
                </div>
                <div style="position: relative;top: 40px; left: 50px;">
                    <input type="file" id="activityFile">
                </div>
                <div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;">
                    <h3>重要提示</h3>
                    <ul>
                        <li>操作仅针对Excel，仅支持后缀名为XLS/XLSX的文件。</li>
                        <li>给定文件的第一行将视为字段名。</li>
                        <li>请确认您的文件大小不超过5MB。</li>
                        <li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
                        <li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
                        <li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
                        <li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>市场活动列表</h3>
        </div>
    </div>
</div>

<!--查询输入框-->
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">名称</div>
                        <input class="form-control" id="name" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">所有者</div>
                        <input class="form-control" id="owner" type="text">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">开始日期</div>
                        <input class="form-control mydate" type="text" id="startDate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">结束日期</div>
                        <input class="form-control mydate" type="text" id="endDate">
                    </div>
                </div>

                <%--submit  同步发送表单--%>
                <button type="button" id="queryBt" class="btn btn-default">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar"
             style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="createBtn" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-plus"></span> 创建
                </button>
                <button type="button" class="btn btn-default"  id="updateBtn"><span
                        class="glyphicon glyphicon-pencil"></span> 修改
                </button>
                <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
            </div>
            <div class="btn-group" style="position: relative; top: 18%;">
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal">
                    <span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）
                </button>
                <button id="exportActivityAllBtn" onclick="window.location.href='/activity/exportExcel'" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）
                </button>
                <button id="exportActivityXzBtn" type="button" class="btn btn-default"><span
                        class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）
                </button>
            </div>
        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="checkAll" /></td>
                    <td>名称</td>
                    <td>所有者</td>
                    <td>开始日期</td>
                    <td>结束日期</td>
                </tr>
                </thead>
                <tbody id="activityList">


                </tbody>
            </table>
        </div>

        <%--使用分页插件--%>

        <div id="myPagination"></div>

        <%--原来的 分页--%>
        <%--<div style="height: 50px; position: relative;top: 30px;">
            <div>
                <button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
            </div>
            <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
                <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        10
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">20</a></li>
                        <li><a href="#">30</a></li>
                    </ul>
                </div>
                <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
            </div>
            <div style="position: relative;top: -88px; left: 285px;">
                <nav>
                    <ul class="pagination">
                        <li class="disabled"><a href="#">首页</a></li>
                        <li class="disabled"><a href="#">上一页</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">下一页</a></li>
                        <li class="disabled"><a href="#">末页</a></li>
                    </ul>
                </nav>
            </div>
        </div>--%>

    </div>

</div>
</body>
</html>